<template>
  <el-dropdown trigger="click" ref="itemOperDropdown" style="position: absolute">
    <span class="el-dropdown-link" id="itemOperListBtn" ref="itemOperListBtn"></span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item key="0" @click.native="handleCopyItem">
        <a>复制</a>
      </el-dropdown-item>
      <el-dropdown-item key="1" divided @click.native="handleRemoveItem">
        <a>删除</a>
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>
<script>
  import vpd from '../mixins/vpd';

  export default {
    mixins: [vpd],
    data() {
      return {
        dropdown: null,
      }
    },
    computed: {
      activeElement() {
        return this.$vpd.state.activeElement;
      },
    },
    mounted() {
      this.$vpd.$on('vpd-contextmenu', data => {
        this.show(data.event, data.item)
      });
      this.dropdown = this.$refs.itemOperDropdown.$el;
    },
    methods: {
      show(ev, item) {
        // 设置选中元素
        this.$vpd.commit('select', {
          uuid: item.uuid
        });
        console.log(ev.screenX, ev.screenY);
        if (this.dropdown) {
          this.dropdown.style.left = ev.clientX + 'px';
          this.dropdown.style.top = (ev.clientY) + 'px';
          this.$refs.itemOperListBtn.click();
        }
      },
      /**
       * 删除元件对象
       */
      handleRemoveItem() {
        this.$vpd.commit('delete');
      },
      /**
       * 复制元件对象
       */
      handleCopyItem() {
        const setting = JSON.parse(JSON.stringify(this.activeElement));
        //复制出来的位置稍微错开一些
        setting.x += 20;
        setting.y += 20;
        const item = {setting: setting};
        this.$vpd.dispatch('addWidget', item);
      }
    }
  }
</script>
<style>
  #itemOperListBtn {
    position: absolute;
    width: 1px;
    height: 1px;
    background-color: red;
    visibility: hidden;
  }
</style>
